<template>
    <!--这个是整个页面的弹出层-->
    <!-- <div style="position: fixed; top: 0; bottom:0; left:0; right:0;
background-color: rgba(227,207,87,0.5);overflow: auto">
        <div style="position: relative;margin-left: auto;margin-right: auto;margin-top: 50px;width:500px;background-color: #fff">
        <h1>我是标题</h1>
        </div>
    </div> -->
    <!--小提示框-->
    <div  class="parent donghua" id='alert'>
        <span class="child">{{tip}}</span>
    </div>
</template>
<script>
export default {
    data () {
        return {
            title: '我是全局提示组件'
        }
    },
    // mounted: {
    //     // $('#loading').hide()
    // },
    props: ['tip'],
    methods: {
        update () {
            
        }
    }
}
</script>


<style scoped>
    .parent{
        position: fixed;top:0;left:0;right:0;margin-left: auto;margin-right: auto;margin-top: 20px;
    }
    .child{
        border:1px solid #FFD39B;padding: 10px 20px;border-radius:5px;box-shadow:2px 2px 0px #F0F0F0;background-color: #FFDEAD
    }
    .donghua{
        animation:myfirst 3s none;
        animation-direction:alternate;
        animation-iteration-count:1;
        animation-fill-mode: forwards;
    }
    @keyframes myfirst{
        from {margin-top:20px;}
        to { margin-top:300px;}
    }
</style>

